<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Drag & drop</title>
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link
            href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap"
            rel="stylesheet"
        >
    </head>
    <body>
        <div id="team-members">
            <article class="team-member">
                <img
                    class="team-member-avatar"
                    src="assets/james.jpg"
                    alt="James Alexander"
                >
                <div class="team-member-name">
                    <h3>James Alexander</h3>
                    <p>Full-Stack Developer</p>
                </div>
                <ul class="social-links">
                    <li>
                        <a href="#"><img src="assets/linkedin.svg" alt="Linkedin"></a>
                    </li>
                    <li>
                        <a href="#"><img src="assets/x.svg" alt="X"></a>
                    </li>
                    <li>
                        <a href="#"><img src="assets/github.svg" alt="GitHub"></a>
                    </li>
                </ul>
            </article>
            <article class="team-member">
                <img
                    class="team-member-avatar"
                    src="assets/liliya.jpg"
                    alt="Lilia Williams"
                >
                <div class="team-member-name">
                    <h3>
                        Lilia Williams
                    </h3>
                    <p>
                        UX/UI Designer
                    </p>
                </div>
                <ul class="social-links">
                   
                    <li>
                        <a href="#">
                            <img src="assets/linkedin.svg" alt="Linkedin">                                
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="assets/x.svg" alt="X">                                                                
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="assets/instagram.svg" alt="Instagram">
                        </a>
                    </li>
                </ul>
            </article>
            <article class="team-member">
                <img
                    class="team-member-avatar"
                    src="assets/alex.jpg"
                    alt="Alexander Smith"
                >
                <div class="team-member-name">
                    <h3>
                        Alexander Smith
                    </h3>
                    <p>
                        Product Manager
                    </p>
                </div>
                <ul class="social-links">
                    <li>
                        <a href="#">
                            <img src="assets/linkedin.svg" alt="Linkedin">                                
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="assets/x.svg" alt="X">                                                                
                        </a>
                    </li>
                </ul>
            </article>
            <article class="team-member">
                <img
                    class="team-member-avatar"
                    src="assets/melissa.jpg"
                    alt="Melissa Taylor"
                >
                <div class="team-member-name">
                    <h3>
                        Melissa Taylor
                    </h3>
                    <p>
                        Data Science
                    </p>
                </div>
                <ul class="social-links">
                    <li>
                        <a href="#">
                            <img src="assets/linkedin.svg" alt="Linkedin">                                
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="assets/x.svg" alt="X">                                                                
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="assets/github.svg" alt="GitHub">                                                                
                        </a>
                    </li>
                </ul>
            </article>
        </div>
        <!-- JS scripts -->
        <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

